<template>
	<!-- 商品详情 -->
	<view class="Product-details">
		<!-- 商品图轮播 -->
		<view class="details-swiper">
			<swiper :indicator-dots="true" :autoplay="true" :circular="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in goodsImg" :key="index">
					<view class="swiper-item">
						<image :src="item" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 商品名 -->
		<view class="goods-name">{{goodsData.name}}</view>
		<view class="details-integral">
			<view class="integral-title">{{goodsData.integral}}回收币</view>
			<view class="integral-content">
				<view class="already">已兑{{goodsData.already}}件</view>
				<view class="inventory">库存{{goodsData.inventory}}件</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="specifics">
			<view class="specifics-title">
				<text class="specifics-line">————</text>
				商品详情
				<text class="specifics-line">————</text>
			</view>
			<view class="detailContent">
				<rich-text :nodes="goodsData.detail"></rich-text>
			</view>
		</view>
		<view class="orderBuy" @tap="intoBay">立即购买</view>
	</view>
</template>

<script>
	import $http from "@/component/commen/api/request.js"
	export default {
		data() {
			return {
				goodsImg:[],//商品轮播图
				goodsData:{},//商品数据
			};
		},
		onLoad(e) {
			// console.log(e)
			$http({
				url:`?i=2&t=0&v=2.7.4&from=wxapp&c=entry&a=wxapp&do=goods&op=detail&m=wjyk_recycle&sign=b9a35356de250da6bdd9d3f3794e1e48&goodsid=${e.goodsId}`,
				method:"get"
			}).then((res)=>{
				console.log(res)
				this.goodsData = res.data
				this.goodsImg = res.data.banner
			})
		},
		methods:{
			intoBay(){
				uni.navigateTo({
					url:"/otherPages/order-buy/order-buy"
				})
			}
		}
	}
</script>

<style lang="scss">
.Product-details{
	font-size: 29rpx;
	.details-swiper{
		swiper{
			height: 600rpx;
			// border: 1px solid #f00;
		}
		.swiper-item{
			height: 100%;
			image{
				width: 100%;
				height: 100%;
				// border: 1px solid #000;
			}
		}
	}
	// 商品名
	.goods-name{
		padding:20rpx 30rpx;
		font-weight: bold;
		background: #fff;
		border-bottom: 2rpx solid #f4f4f4;
	}
	.details-integral{
		padding:10rpx 30rpx;
		background: #fff;
		.integral-title{
			color: #00b388;
			font-weight: bold;
			font-size: 33rpx;
		}
		.integral-content{
			font-size: 28rpx;
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
			.already{
				color: #707070; 
			}
			.inventory{
				color: #bcbcbc;
			}
		}
	}
	.specifics{
		padding: 20rpx 30rpx;
		background: #fff;
		margin-top: 20rpx;
		.specifics-title{
			font-size: 33rpx;
			text-align: center;
			.specifics-line{
				color: #d5d5d5;
				margin: 0 20rpx;
			}
		}
	}
	.detailContent{
		margin-top: 20rpx;
		font-size: 28rpx;
	}
	// 立即购买
	.orderBuy{
		width:80%;
		margin: 80rpx auto;
		padding: 20rpx 0;
		text-align: center;
		background: #00b388;
		color: #fff;
		border-radius: 65rpx
	}
}
</style>
